<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Tooltip Widget Demo - jtooltip</title>

<script type="text/javascript" src="jqueryJS/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryJS/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jqueryJS/jquery.bgiframe.js"></script>
<script type="text/javascript" src="http://jquery-template.googlecode.com/svn/trunk/jquery.template-0.3.js"></script>
<script type="text/javascript" src="jqueryJS/jquery.ui.position.js"></script>
<script type="text/javascript" src="../jquery.jtooltip.js"></script>
<link type="text/css" rel="stylesheet" href="jqueryJS/jquery-ui-1.7.2.custom.css" />
<link type="text/css" rel="stylesheet"  href="../jquery.jtooltip.css" />
<link type="text/css" rel="stylesheet"  href="main.css" />

<script type="text/javascript">
$(function() {
$('#set1 *').jtooltip();

$("#foottip a").jtooltip({
	template: "",
	bodyHandler: function(el) {
		return $($(this.element[0]).attr("href")).html();
	}
});

$('#tonus').jtooltip({
	delay: 0,
	template: "",
	bodyHandler: function(el) {
		return $("<img/>").attr("src", this.element[0].src);
	}
});

$('#yahoo a').jtooltip({
	delay: 0,
	fade: 1050
});

$("select").jtooltip({
	left: 25
});

$('#right a').jtooltip({
	delay: 0,
	tooltipClass: "ui-widget-content ui-corner-all right"
});
$('#right2 a').jtooltip({ });

$('#jsonhref').jtooltip({
	delay: 100,
	fade: 250,
	template: "This is tooltip above href. And href is: {href}",
	getJSONparams: function (el) { return { href: $(this.element[0]).attr("href") }; }
});

$('#jsontext').jtooltip({
	delay: 100,
	fade: 250,
	template: "{Title}. And text value is: {text}",
	getJSONparams: function (el) { return { text: this.element[0].value, Title : "This is tooltip above text" }; }
});

$("#lblUserName").jtooltip({
	delay: 100,
	fade: 250,
	loadURL: 'http://jquery-tooltip.googlecode.com/svn/jquery-tooltip/demos/JSON.html',
	template: '<div style="color:red"> Thank you. <br /> {foreach:} <p style="color: green; margin: 10px;"> Wine - {wine} </p> <span>Sugar - {sugar} </span> <span> Lemon is {lemon} </span> {/foreach:} </div>',
});

jjtLabel = $("#lbltooltip").jtooltip({
	position_at: "right top",
	position_my: "left bottom",
	left: -50,
	top: -15
});

$("#btnShow").click ( function () {
	jjtLabel.jtooltip("show");
});

$("#btnHide").click ( function () {
	jjtLabel.jtooltip("hide");
});

jjtBindLabel = $("#lblbindtooltip").jtooltip({
});
jjtBindLabel.bind('onshow', function() { $('#lblstatus').text("Show"); } );
jjtBindLabel.bind('onhide', function() { $('#lblstatus').text("Hide"); } );


});
</script>

</head>
<body>
<h1 style="text-align:center;"><a href="http://code.google.com/p/jquery-tooltip/">jQuery Tooltip Widget</a> Demo</h1>
<div id="main">
	<fieldset id="set1">
		<legend>Three elements with tooltips, default settings</legend>
		<a title="A tooltip with default settings, the href is displayed below the title" href="http://google.com">Link to google</a>
		<br/>
		<label title="A label with a title and default settings, no href here" for="text1">Input something please!</label>
		<br/>
		<input title="Note that the tooltip disappears when clicking the input element" type="text" value="Test" name="action" id="text1"/>
		
		<h3>Code</h3>
		<pre><code class="mix">$('#set1 *').tooltip();</code></pre>
	</fieldset>
	
	<fieldset id="foottip">
		<legend>Using bodyHandler to display footnotes in the tooltip</legend>
		Some text referring to a <a href="#footnote">footnote</a>.
		<br/>
		<br/>
		<br/>
		<br/>
		<div id="footnote"><em>And here</em> is the actual footnote, complete with nested <strong>HTML</strong>.</div>
		
		<h3>Code</h3>
		<pre> <code class="mix">
$("#foottip a").jtooltip({
	template: "",
	bodyHandler: function(el) {
		return $($(this.element[0]).attr("href")).html();
	}
});
		</code> </pre>
	</fieldset>
	
	<fieldset>
		<legend>An image with a tooltip</legend>
		<img id="tonus" src="http://jquery-tooltip.googlecode.com/svn/jquery-tooltip/demos/logo.jpeg" height="40" title="No delay. The src value is displayed below the title" />
		<h3>Code</h3>
		<pre> <code class="mix">
$('#tonus').jtooltip({
	delay: 0,
	template: "",
	bodyHandler: function(el) {
		return $("&lt;img/&gt;").attr("src", this.element[0].src);
	}
});
		</code> </pre>
	</fieldset>
	
	<fieldset>
		<legend>The next four links have no delay with fading:</legend>
		<div id="yahoo">
			<a title="Yahoo doo - more content" href="http://yahoo.com">Link to yahoo</a>
			<a title="Yahoo doo2 - wohooo" href="http://yahoo.com">Link to yahoo1</a>
			<a title="Yahoo doo3" href="http://yahoo.com">Link to yahoo2</a>
			<a title="Yahoo doo4 - buga!" href="http://yahoo.com">Link to yahoo3</a>
		</div>
		<h3>Code</h3>
		<pre> <code class="mix">
$('#yahoo a').jtooltip({
	delay: 0,
	fade: 1050
});
		</code> </pre>
	</fieldset>
	
	<fieldset>
		<legend>Selects</legend>
		<select title="fancy select with a tooltip">
			<option>1. option</option>
			<option>2. option</option>
			<option>3. option</option>
		</select>
	</fieldset>
	
	<fieldset>
		<legend>Testing repositioning at viewport borders</legend>
		<p id="right">
			Tooltip with fixed width<br/>
			<a title="Short title" href="http://goggle.com">Google me!</a><br/>
			<a title="Rather a very very long title with no meaning but yet quite long long long" href="http://goggle.com">Google me!</a>
		</p>
		<p id="right2">
			Tooltip width auto width<br/>
			<a title="Short title" href="http://goggle.com">Google me!</a><br/>
			<a title="Rather a very very long title with no meaning but yet quite long long long" href="http://goggle.com">Google me!</a>
		</p>
		<h3>Code</h3>
		<pre><code class="mix">$('#right a').jtooltip({
	delay: 0,
	tooltipClass: "ui-widget-content ui-corner-all right"
});
$('#right2 a').jtooltip({ });
</code></pre>
	</fieldset>
	
	<fieldset>
		<legend>Tooltip with special template string and local JSON parameter</legend>
		<a id="jsonhref" href="#localhref">Simple Link</a> <br />
		<input id="jsontext" type="text" value="text" />
		
		<h3>Code</h3>
		<pre> <code class="mix">
$('#jsonhref').jtooltip({
	delay: 100,
	fade: 250,
	template: "This is tooltip above href. And href is: {href}",
	getJSONparams: function (el) { return { href: $(this.element[0]).attr("href") }; }
});

$('#jsontext').jtooltip({
	delay: 100,
	fade: 250,
	template: "{Title}. And text value is: {text}",
	getJSONparams: function (el) { return { text: this.element[0].value, Title : "This is tooltip above text" }; }
});
		</code> </pre>
	</fieldset>

	<fieldset>
		<legend>Tooltip with special template string and get remote JSON response</legend>
		<!-- <label id="lblUserName">UserName</label> -->
		
		<h3>Code</h3>
		<pre> <code class="mix">
$("#lblUserName").jtooltip({
	delay: 100,
	fade: 250,
	loadURL: 'http://localhost/JSON.html',
	template: '&lt;div style="color:red"&gt; Thank you. &lt;br /&gt; {foreach:} &lt;p style="color: green; margin: 10px;"&gt; Wine - {wine} &lt;/p&gt; &lt;span&gt;Sugar - {sugar} &lt;/span&gt; &lt;span&gt; Lemon is {lemon} &lt;/span&gt; {/foreach:} &lt;/div&gt;'
});
		</code> </pre>
	</fieldset>

	<fieldset>
		<legend>Show and hide Tooltip programatically. Also set diferent position</legend>
		<label id="lbltooltip" title="Show and hide Tooltip programatically"> Usual tooltip. Click at buttons to show or hide tooltip.  </label> <br /> <br />
		<input id="btnShow" type="button" value="Show tooltip" />
		<input id="btnHide" type="button" value="Hide tooltip" />
		
		<h3>Code</h3>
		<pre> <code class="mix">
jjtLabel = $("#lbltooltip").jtooltip({
	position_at: "right top",
	position_my: "left bottom",
	left: -50,
	top: -15
});

$("#btnShow").click ( function () {
	jjtLabel.jtooltip("show");
});

$("#btnHide").click ( function () {
	jjtLabel.jtooltip("hide");
});
		</code> </pre>
	</fieldset>
	<fieldset>
		<legend>Show tooltip status by binding onshow and onhide event</legend>
		<label id="lblbindtooltip" title="Show tooltip status"> Please move across this label.  </label> <br /> <br />
		jTooltip status: <label id="lblstatus">Hide</label>

		<h3>Code</h3>
		<pre> <code class="mix">
jjtBindLabel = $("#lblbindtooltip").jtooltip({ });
jjtBindLabel.bind('onshow', function() { $('#lblstatus').text("Show"); } );
jjtBindLabel.bind('onhide', function() { $('#lblstatus').text("Hide"); } );
		</code> </pre>
	</fieldset>

</div>
</body>
</html>